<template>
  <div>
    <div style="color: darkorange; font-size: small; height: 30px">
      <el-input v-model="to_term"
                class="input"
                placeholder="学期"
                style="width: 150px"></el-input>&nbsp;
      <el-button class="botton"
                 @click="load()">搜索</el-button>
    </div>
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :row-style="{ color: 'darkorange', height: '60px' }"
                fit
                style="width: 100%">
        <el-table-column label="学期"
                         prop="term"></el-table-column>
        <el-table-column label="总周次"
                         prop="week"></el-table-column>
        <el-table-column label="备注"
                         :disabled=false
                         prop="stateString"></el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0; text-align: center">
      <el-pagination :current-page="page"
                     :total="total"
                     background
                     class="white-list-tool"
                     layout="total,prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      total: 0,
      page: 1,
      centerDialogVisible: false,
      insertOrUpdate: true,
      in_term: "",
      to_term: "",
      multipleSelection: [],
    };
  },
  methods: {
    HandleSelectChange (val) {
      this.multipleSelection = val;
    },
    async multipleDelete () {
      var id = this.mutipleSelection.map((v) => v.semesterId);
      for (var i = 0; i < id.length; i++) {
        await this.$http.delete("/semester/" + id[i], { headers: { 'userId': this.token } });
      }
      this.load();
    },
    async insertSemester () {
      await this.$http.post("/semester", { term: this.in_term }, { headers: { 'userId': this.token } });
      this.centerDialogVisible = false;
      this.load();
    },
    load () {
      this.$http
        .post("/semester/1", {
          term: this.to_term,
          page: this.page,
        }).then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    handleCurrentChange (page) {
      this.page = page;
      this.load();
    },
    async deletesemester (id) {
      await this.$http.delete("/semester/" + id, { headers: { 'userId': this.token } });
      this.load();
    },
    editSemester (row) {
      this.insertOrUpdate = false;
      this.in_userId = row.userId;
      this.in_userName = row.userName;
      this.in_userPassword = row.userPassword;
      this.centerDialogVisible = true;
    },
  },
  created () {
    this.load();
  },
};
</script>


<style scoped>
.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>